{% extends 'layout/manage.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.min.css' %}">
    <style>
        .title-list {
            border-right: 1px solid #3c3c3c;
            min-height: 500px;
            margin-left: -30px;
        }

        .content {
            border-left: 1px solid #3c3c3c;
            min-height: 600px;
            margin-left: -1px;
        }

        .function {
            float: right;
            margin-right: 20px;
        }

        .editormd-fullscreen {
            z-index: 1001;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-project">
            <div class="panel-heading"><i class="fa fa-book" aria-hidden="true" style="margin-right: 5px"></i>Wiki文档
                <div class="function">
                    <a href="{% url 'wiki' project_id=request.tracer.project.id %}"
                       style="margin-left: 5px; color: #d7d7d7">
                        <i class="fa fa-chevron-left" aria-hidden="true"></i> 返回</i>
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-sm-3 title-list">
                    <ul id="catalog">
                    </ul>
                </div>
                <div class="col-sm-9 content">
                    <div style="text-align: center"><h3>{{ title }}</h3></div>
                    <div style="text-align: center; margin-top: 50px">
                        <form method="post" novalidate>
                            {% csrf_token %}
                            {% for field in form %}
                                {% if field.name == 'content' %}
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}"
                                               style="float: left;">{{ field.label }}</label>
                                        <div id="editor">
                                            {{ field }}
                                        </div>
                                        <span class="error-msg">{{ field.errors.0 }}</span>
                                    </div>
                                {% else %}
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}"
                                               style="float: left;">{{ field.label }}</label>
                                        {{ field }}
                                        <span class="error-msg">{{ field.errors.0 }}</span>
                                    </div>
                                {% endif %}
                            {% endfor %}
                            <button type="submit" class="btn btn-project"> 提 交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>





{% endblock %}
{% block js %}
    <script src="{% static 'plugins/editor-md/editormd.amd.min.js' %}"></script>
    <script>
        var WIKI_DETAIL_URL = '{% url 'wiki' project_id=request.tracer.project.id %}';
        var WIKI_UPLOAD_URL = '{% url 'wiki_upload' project_id=request.tracer.project.id %}'

        $(function () {
            initCatalog();
            initEditorMd();
            popover();
        })

        //初始化Markdown编辑器
        function initEditorMd() {
            editormd('editor', {
                placeholder: "请输入内容",
                height: 500,
                path: "{% static 'plugins/editor-md/lib/' %}", //依赖组件目录
                imageUpload: true,
                imageFormats: ['jpg', 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL
            })
        }

        //更新目录
        function initCatalog() {
            $.ajax({
                url: '{% url "wiki_catalog" project_id=request.tracer.project.id %}',
                method: 'get',
                datatype: 'JSON',
                success: function (res) {
                    console.log(res);
                    if (res.status) {
                        $.each(res.data, function (index, item) {
                            // item=[1, xx, null], index=1,2,3...
                            console.log('initCatalog, ', item.title)
                            //  <li><a>目录2</a></li>
                            // 添加到catalog
                            var li = $("<li>").attr('id', 'id_' + item.id).append($('<a>').text(item.title).attr('href', WIKI_DETAIL_URL + '?wiki_id=' + item.id)).append('<ul>');
                            if (!item.parent_id) {
                                $('#catalog').append(li);
                            } else {
                                $('#id_' + item.parent_id).children('ul').append(li);
                            }
                        })
                    } else {
                        alert('初始化目录失败');
                    }
                }
            })
        }

        //删除弹出框
        function popover(URL, LOCATION_TO) {
            $(".pop-user").click(function () {
                console.log('666');
                $(this).popover({
                    animation: true,
                    trigger: 'manual',
                    title: $('#popover-title').html(),
                    content: $('#popover-element').html(),
                })
                $(this).popover("show")

                {% if wiki_object %}
                    $('.btnDelWiki').click(function () {
                        //删除文章
                        $.ajax({
                            url: '{% url "wiki_delete" project_id=request.tracer.project.id wiki_id=wiki_object.id %}?rdstr={{ request.tracer.rdstr }}',
                            method: 'get',
                            dataType: 'JSON',
                            success: function (res) {
                                console.log(res)
                                if (res.status) {
                                    $('#catalog').children().remove();  //删除文章后将目录清除，重新加载
                                    initCatalog();
                                } else {
                                    location.href = LOCATION_TO;
                                }
                            }
                        })
                    })
                {% endif %}
                $(".poptd").mouseleave(function () {
                    $(".popover").popover('hide');
                })

            })
        }
    </script>
{% endblock %}